<!-- 压占分析/压盖分析 -->
<template>
  <div class="view-main">
    <div class="view-box">
      <div class="view-main-title">
        <span class="view-main-title-config">分析范围设置</span>
      </div>
      <el-row :gutter="12">
        <el-col :span="6"> 绘制 </el-col>
        <el-col :span="6"> 导入 </el-col>
        <el-col :span="6"> 选择 </el-col>
        <el-col :span="6"> 输入 </el-col>
      </el-row>
      <div class="view-main-title">
        <span class="view-main-title-config">分析项设置</span>
        <span class="view-main-title-config">地块详情</span>
        <span class="view-main-title-config">分析定位结果</span>
      </div>
      <div class="view-main-checkBox">
        <el-tree
          :data="dataSource"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span v-if="!data.isFirstNode">
                <el-select
                  v-model="data.currYear"
                  multiple
                  placeholder="年份"
                  collapse-tags
                >
                  <el-option
                    v-for="item in data.years"
                    :key="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="view-main-button">
      <div class="view-main-button-savePlan">更多分析功能</div>
      <div class="view-main-button-buttonBox">
        <el-span>共选中<el-span style="color: blue">0</el-span>项</el-span>
        <el-button type="info" size="small" icon="el-icon-refresh-right">
          重置
        </el-button>
        <el-button type="primary" size="small">分析</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from "vue";
interface DataProps {}
export default defineComponent({
  props: {},
  data() {
    return {
      title: "",
    };
  },
  name: "GlandAnalysis",
  components: {},
  setup() {
    const dataSource = ref([
      {
        id: 1,
        label: "现状分析",
        isFirstNode: true,
        currYear: "0",
        years: ["0"],
        children: [
          {
            id: 4,
            label: "地类分析",
            isFirstNode: false,
            currYear: "2021",
            years: ["2021", "2020", "2019", "2018", "2017", "2016", "2015"],
          },
        ],
      },
      {
        id: 2,
        label: "规划分析",
        isFirstNode: true,
        currYear: "0",
        years: ["0"],
        children: [
          {
            id: 5,
            label: "调整后生态保护红线20210430",
            isFirstNode: false,
            currYear: "2021",
            years: ["2021", "2020", "2019", "2018", "2017", "2016", "2015"],
          },
          {
            id: 6,
            label: "自治区主体功能区规划分析",
            isFirstNode: false,
            currYear: "2021",
            years: ["2021", "2020", "2019", "2018", "2017", "2016", "2015"],
          },
        ],
      },
      {
        id: 3,
        label: "原保护区分析",
        isFirstNode: true,
        currYear: "0",
        years: ["0"],
        children: [
          {
            id: 7,
            label: "生态保护红线分析",
            isFirstNode: false,
            currYear: "2021",
            years: ["2021", "2020", "2019", "2018", "2017", "2016", "2015"],
          },
          {
            id: 8,
            label: "地质公园分析",
            isFirstNode: false,
            currYear: "2021",
            years: ["2021", "2020", "2019", "2018", "2017", "2016", "2015"],
          },
        ],
      },
      {
        id: 4,
        label: "耕保分析",
        isFirstNode: true,
        currYear: "0",
        years: ["0"],
      },
      {
        id: 5,
        label: "矿产资源规划分析",
        isFirstNode: true,
        currYear: "0",
        years: ["0"],
      },
      {
        id: 6,
        label: "管理数据分析",
        isFirstNode: true,
        currYear: "0",
        years: ["0"],
      },
      {
        id: 7,
        label: "矿产资源储量分析",
        isFirstNode: true,
        currYear: "0",
        years: ["0"],
      },
    ]);
    return {
      dataSource,
    };
  },
});
</script>
<style lang="less" scoped>
.view-main {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
  .view-box {
    min-height: calc(100vh - 150px);
    padding-right: 10px;
  }
  .el-form {
    padding-left: 10px;
    .el-form-item {
      width: 90%;
      .el-select {
        width: 100%;
      }
    }
  }

  &-title {
    width: 98%;
    margin: 5px;
    height: 24px;
    background-color: #eee;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-config {
      padding-left: 10px;
      color: #333;
      font-size: 14px;
      font-weight: 500;
      border-left: 3px solid #1299f5;
    }
    &-address {
      color: #1299f5;
      font-size: 12px;
      padding-right: 10px;
      cursor: pointer;
    }
  }
  &-checkBox {
    padding-left: 10px;
  }
  &-button {
    width: 100%;
    flex-direction: 1;
    border-top: 1px solid #eee;
    padding: 10px;
    box-sizing: border-box;
    // position: fixed;
    // bottom: 10px;
    &-buttonBox {
      width: 80%;
      margin: 0 auto;
      text-align: center;
    }
    &-savePlan {
      font-size: 12px;
      color: #1299f5;
      text-align: center;
      margin-bottom: 0;
    }
    // padding-top: 100px;
    // display: flex;
    // justify-content: center;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
<style>
.el-input__inner {
  width: 100px !important;
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 !important;
  border: none !important;
}
.el-select__tags {
  width: 60px !important;
}
/* .el-select__tags > span {
  height: 32px;
} */
.el-tag--small {
  padding: 0 8px;
}
.el-select .el-tag__close {
  margin-left: -5px;
}
</style>
